<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css-position</title>
		<style>
				p {
				margin: 0;
		</style>

	</head>

	<body>
		<!--
        	1. relative好奇怪啊，其他的都不改变，连测试4他都不往下挤
        	2. 其实相对定位应该理解为相对本来应该在的位置偏移top left等
        	3. 然后是最重要的 "而不影响其它元素",注意只是自己动，别人都不动
        -->
		<p>测试1</p>
		<p>测试2</p>
		<p style="position: relative;top: 10px;left: 10px;">测试3</p>
		<p>测试4</p>
		<p>测试5</p>

		<!--第二节 absolute
			1.absolute 脱离文档流且具有包裹性
			2.虽然是absolute但是，他的位置还带在以前的地方一点都没变(不设置top left的值)
				设置了以后就严格按照你设置的值了
			3.【所以3 与  4重叠了。其实不是3和4重叠，是3脱离文档流，但还在以前的位置。】
			    【因为3脱离了文档流所以他就不会收到3的影响。跑到上面去了，所以就重叠了】
		-->
		<p>视频教程1</p>
		<p>视频教程2</p>
		<p style="background-color: yellow;position: absolute;">视频教程3</p>
		<p>视频教程4</p>

		<!--absolute 设置了top left-->
		<p style="background-color: green;position: absolute;top:100px;left: 100px;">视频教程5</p>
		<!--第三节 fixed定位
			1.fixed也具有包裹性，设置长宽是无效的
		-->
		<p style="background: gray;position: fixed;">这是fixed定位</p>
		
		<!--
        	啥叫定位上下文,请参考2续
        -->
	</body>

</html>